<template>
    <view :style="'min-height:'+viewH+'px;'">
		<!-- #ifdef MP -->
		<!-- MP 导航栏 -->
		<view class="flex align-center px-1 bg-light fixed-top" style="height: 44px;">
			<view class="flex-1"></view>
			<view class="m-1 mr-auto">
				<text class="iconfont iconshezhi mx-2" style="font-size: 40rpx;"
				@click="doSetting"></text>
				<text class="iconfont iconxiaoxi mx-2" style="font-size: 40rpx;"></text>
			</view>
		</view>
		<!-- 由于顶部固定的导航栏会遮住页面内容，因此这里需要做一个站位view -->
		<view style="min-height: 44px;"></view>
		<!-- #endif -->
		<!-- 用户信息 已登录-->
		<block v-if="user">
			<view class="flex align-center justify-center py-3" @click="navigateTo('user-space','user_id='+user.id)">
					<image :src="user.avatar || '/static/demo/userpic/12.jpg'" mode="aspectFill"
					 class="flex-shrink ml-3"
					style="height: 120rpx; width: 120rpx; border-radius: 120rpx;"></image>
					<view class="flex-1 ml-2">
						<view class="font-md text-dark my-1">{{user.nickname || user.username || '暂无'}} <text class="font text-muted ml-2">{{user.sex}} 广东</text></view>
						<text class="font text-muted">{{user.description || '暂无描述'}}</text>
					</view> 
			</view>
		</block>
		<block v-else>
			<!-- 用户信息 未登录-->
			<navigator url="../login/login">
			<view class="flex align-center justify-center py-3">
					<image src="/static/demo/userpic/12.jpg" mode="aspectFill"
					 class="flex-shrink ml-3"
					style="height: 120rpx; width: 120rpx; border-radius: 120rpx;"></image>
					<view class="flex-1 ml-2">
						<view class="font-md text-main my-1">点击登录</view>
						<text class="font text-muted">请先登录</text>
					</view> 
			</view>
			</navigator>
		</block>
		
       <view class="f-divider"></view>
	   
	   <view>
		   <view class="py-4 px-3 flex align-center font text-muted" hover-class="bg-light" @click="navigateTo('my-videos')">
			   <text class="iconfont iconbofang1 mr-2"></text>
			   <text class="mr-auto">我的作品</text>
			   <text class="mr-1">{{videoCount?videoCount:''}}个</text>
			   <text class="iconfont iconjinru text-light-muted"></text>
		   </view>
		   
		   <view class="py-4 px-3 flex align-center font text-muted" hover-class="bg-light"  @click="navigateTo('my-favorites')">
			   <text class="iconfont iconshoucang1 mr-2"></text>
			   <text class="mr-auto">收藏</text>
			   <text class="mr-1">{{favaCount?favaCount:''}}个</text>
			   <text class="iconfont iconjinru text-light-muted"></text>
		   </view>
		   
		   <view class="py-4 px-3 flex align-center font text-muted" hover-class="bg-light" @click="navigateTo('user-follow')">
			   <text class="iconfont iconguanzhu mr-2"></text>
			   <text class="mr-auto">关注</text>
			   <text class="mr-1">{{followCount?followCount:''}}</text>
			   <text class="iconfont iconjinru text-light-muted"></text>
		   </view>
		   
		   <view class="py-4 px-3 flex align-center font text-muted" hover-class="bg-light" @click="navigateTo('user-follow','type=fans')">
			   <text class="iconfont iconguanzhu mr-2"></text>
			   <text class="mr-auto">粉丝</text>
			   <text class="mr-1">{{fanCount?fanCount:''}}</text>
			   <text class="iconfont iconjinru text-light-muted"></text>
		   </view>
		   
		   <view class="py-4 px-3 flex align-center font text-muted" hover-class="bg-light"  @click="navigateTo('user_history')">
			   <text class="iconfont iconlishi mr-2"></text>
			   <text class="mr-auto">历史记录</text>
			   <text class="mr-1"></text>
			   <text class="iconfont iconjinru text-light-muted"></text>
		   </view>
		   
		   <navigator url="../test/test">
			   <view class="py-4 px-3 flex align-center font text-muted" hover-class="bg-light">
				   <text class="iconfont iconlishi mr-2"></text>
				   <text class="mr-auto">uni-forms表单验证</text>
				   <text class="mr-1"></text>
				   <text class="iconfont iconjinru text-light-muted"></text>
			   </view>
		   </navigator>
		   
	   </view>
	   
	    <view class="f-divider"></view>
		
		<!-- 按钮 -->
		<view hover-class="bg-main-hover" class="bg-main text-white font rounded-circle text-center m-3" 
		style="height: 80rpx; line-height: 80rpx;" @click="openCreation">立即投稿</view>
		
		<!-- 弹出选集popup -->
		<uni-popup ref="creation" type="bottom" style="z-index: 1001;">
			<view class="bg-white">
				<view class="flex align-center" style="min-height: 150rpx;">
					<view class="flex-1 flex align-center justify-center flex-column py-1" hover-class="bg-light" @click="create(1)">
						<view class="rounded-circle flex align-center justify-center my-1 bg-primary" style="height: 80rpx; width: 80rpx;">
							<text class="iconfont icondingdanwenjian text-white"></text>
						</view>
						<view class="text-muted font mb-1">单集</view>
					</view>
					<view class="flex-1 flex align-center justify-center flex-column py-1" hover-class="bg-light" @click="create(2)">
						<view class="rounded-circle flex align-center justify-center my-1 bg-main" style=" height: 80rpx; width: 80rpx;">
							<text class="iconfont icon918caidan_wenjian text-white"></text>
						</view>
						<view class="text-muted font mb-1">连载</view>
					</view>
				</view>
				<view class="f-divider"></view>
				<button type="default" plain="true" style="border: none;" @click="closeCreation()">取消</button>
			</view>
		</uni-popup>
    </view>
</template>
 
 
<script>
	// 引入vuex的 mapState
	import { mapState } from 'vuex'
	
    export default {
        data() {
            return {
				videoCount:null,
				favaCount:null,
				followCount:null,
				fanCount:null
            }
        },
		onShow() {
			if(this.user){
				this.getUserStatistics();
			} else {
				this.videoCount = null;
				this.favaCount = null;
				this.followCount = null;
				this.fanCount = null;
			}
		},
		onLoad() {
			let res = uni.getSystemInfoSync()
			this.viewH = res.windowHeight+100
		},
		onNavigationBarButtonTap(e) {
			if(e.index === 1){
				this.doSetting()
			}
		},
		computed:{
			...mapState({
				user: state => state.user
			})
		},
        methods: {
			doSetting(){
				if(this.user){
					uni.navigateTo({
						url:'../user-setting/user-setting'
					})
				}
				else{
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
				}
			},
			getUserStatistics(){
				return this.$H.get('/user/statistics',{token:true}).then(res=>{
					this.videoCount = res.videoCount;
					this.followCount = res.followCount;
					this.fanCount = res.fanCount;
					this.favaCount = res.favaCount;
				}).catch(err=>{
					console.log(JSON.stringify(err));
				})
			},
			openCreation(){
				if(this.user){
					this.$refs.creation.open()
				} else {
					uni.showToast({title:'请先登录',icon:'none'});
				}
			},
			closeCreation(){
				this.$refs.creation.close()
			},
			create(index){
				this.navigateTo('create','type='+index)
				this.$refs.creation.close()
			},
			navigateTo(path,params){
				if(this.user){
					let url = '/pages/'+path+'/'+path
					if(params && params.length > 0){
						url += '?'+params
					}
					uni.navigateTo({
						url
					});
				}
				else {
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
				}
			}
        }
    }
</script>
 
<style scoped>
   
</style>